<script setup>
import { sendValidation } from '@/api/validation';
import { addAdRequest } from '@/api/ad';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue'
import router from '@/router';

const form = reactive({
    name: '',
    phoneNumber: '',
    email: '',
    validation: '',
    company: '',
    adDetail: ''
})

const checkMobile = (rule, value, cb) => {
    const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
    if (regMobile.test(value)) {
        //合法的手机号
        return cb();
    }
    //手机号不合法
    cb(new Error('请输入合法的手机号！'));
}

const rules = {
    name: [{ required: true, message: '姓名不可为空！', trigger: 'blur' }],
    phoneNumber: [
        { required: true, message: '手机号不可为空！', trigger: 'blur' },
        { validator: checkMobile, trigger: ['blur', 'change'] }
    ],
    email: [
        { required: true, message: '邮箱不可为空！', trigger: 'blur' }
        ,
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    validation: [{ required: true, message: '验证码不可为空！', trigger: 'blur' }],
    company: [
        { required: true, message: '公司名不可为空！', trigger: 'blur' }
    ],
    adDetail: [
        { required: true, message: '广告描述不可为空！', trigger: 'blur' }
    ]
}

const isShow = ref(0)

const time = ref(60)
let timer = null

const countdown = () => {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        if (time.value > 0) {
            time.value--; // 时间减1  
            countdown(); // 递归调用，继续倒计时  
        } else {
            clearTimeout(timer); // 倒计时结束，清除定时器  
            // 在这里可以添加倒计时结束后的处理逻辑  
            isShow.value = 2
            time.value = 60
        }
    }, 1000); // 每秒更新一次时间  
}

const validation = async () => {
    if (form.email === null || form.email === '') {
        ElMessage.error('邮箱不可为空')
    } else {
        await sendValidation(form.email)
        ElMessage.success("验证码发送成功")
        isShow.value = 1
        countdown()
    }
}

const put = async () => {
    await addAdRequest(form)
    ElMessage.success("提交成功")
    ElMessage('请等待审核')
    router.push('/')
}

const toHome = () => {
    router.push('/')
}

</script>


<template>
    <div
        style="background-image: url('../../public/bg.png');background-size: cover;width: 100%;height:100vh;overflow: hidden;">
        <div
            style="background-color: rgb(240,248,255,0.85);width: 600px;height: 100%;position: absolute;right: 0;overflow: hidden;">
            <div style="padding: 15px;">
                <span style="color: black;cursor: pointer;font-size: 20px;" @click="toHome">
                    <el-icon>
                        <DArrowLeft />
                    </el-icon>返回首页
                </span>
            </div>
            <div style="width: 400px;margin: 90px auto;border-radius: 25px;">
                <div style="color: rgb(143,70,68);font-size: 30px;text-align: center;padding: 50px;">商 务 合 作</div>
                <el-form :model="form" :rules="rules">
                    <el-form-item prop="name">
                        <el-input style="height: 40px;" v-model="form.name" placeholder="输入您的姓名" clearable />
                    </el-form-item>
                    <el-form-item prop="phoneNumber">
                        <el-input style="height: 40px;" v-model="form.phoneNumber" placeholder="输入您的手机号" clearable />
                    </el-form-item>
                    <el-form-item prop="email">
                        <el-input style="height: 40px;" v-model="form.email" placeholder="输入您的邮箱" clearable>
                            <template #suffix>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 0"
                                    @click="validation">获取验证码</el-button>
                                <el-button :type="primary" text style="border: none;color: gray;" v-if="isShow === 1"
                                    disabled>{{ time }}秒</el-button>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 2"
                                    @click="validation">重新获取</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="validation">
                        <el-input style="height: 40px;" v-model="form.validation" placeholder="输入邮箱验证码" clearable />
                    </el-form-item>
                    <el-form-item prop="company">
                        <el-input style="height: 40px;" v-model="form.company" placeholder="输入贵司名称" clearable />
                    </el-form-item>
                    <el-form-item prop="adDetail">
                        <el-input style="height: 40px;" v-model="form.adDetail" type="textarea"
                            placeholder="在此输入相关的广告描述，详细的描述更能促进我们之间的合作哦" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="put"
                            style="width: 100%;padding: 20px;font-size:20px;margin-top: 20px;">提
                            交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
